<template>
  <div>
    <el-row class="toolbar">
      <el-col :span="8">
        <el-button type="primary" @click="handleAdd">添加</el-button>
      </el-col>
      <el-col :span="10" class="search">
        <el-input
          v-model="query"
          placeholder="请输入搜索关键词"
          clearable
          style="width: 400px"
          @clear="handleQuery"
        >
        </el-input>
      </el-col>
      &nbsp;&nbsp;
      <el-button type="primary" @click="handleQuery">查询</el-button>
    </el-row>

    <el-table :data="tableData" border>
      <el-table-column
        prop="MatCode"
        label="物料编码"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="MatName"
        label="物料名称"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="MatModel"
        label="规格型号"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="MatBrand"
        label="品牌"
        align="center"
      ></el-table-column>
      <el-table-column label="单位" align="center">
        <template v-slot="slot">
          <!-- 使用 row.UnitName 显示单位名称 -->
          {{ slot.row.UnitName }}
        </template>
      </el-table-column>
      <el-table-column label="物料类别" align="center">
        <template v-slot="slot">
          <!-- 使用 row.TypeName 显示物料类别名称 -->
          {{ slot.row.TypeName }}
        </template>
      </el-table-column>
      <el-table-column label="物料属性" align="center">
        <template v-slot="slot">
          <!-- 使用 row.AttName 显示物料属性名称 -->
          {{ slot.row.AttName }}
        </template>
      </el-table-column>
      <el-table-column
        prop="MatPrice"
        label="采购单价"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="MatMin"
        label="最小库存数"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="MatMax"
        label="最大库存数"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="MatDate"
        label="物料有效期"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="MatPolice"
        label="报警天数"
        align="center"
      ></el-table-column>
      <el-table-column prop="MatState" label="状态" align="center">
        <template v-slot="slot">
          <!-- 使用 row.TypeName 显示物料类别名称 -->
          <span v-if="slot.row.MatState == false">禁用</span>
          <span v-else>启用</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="MatDesc"
        label="备注"
        align="center"
      ></el-table-column>
    </el-table>
    <el-pagination
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :page-sizes="[10, 20, 30, 40, 1000]"
      :small="small"
      :disabled="disabled"
      :background="background"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue";
import axios from "axios";
import { useRouter, useRoute } from "vue-router";

const router = useRouter();

const tableData = ref([]);
const total = ref(0);
const currentPage = ref(1);
const pageSize = ref(10);
const small = ref(true);
const disabled = ref(false);
const background = ref(true);
const query = ref("");
const units = ref([]); // 单位下拉列表数据
const materialTypes = ref([]); // 物料类别下拉列表数据
const materialProperties = ref([]); // 物料属性下拉列表数据

const fetchData = async () => {
  try {
    const response = await axios.get(
      `Materials/GetMaterials?pageIndex=${currentPage.value}&pageSize=${pageSize.value}&matCode=${query.value}&matName=${query.value}&matModel=${query.value}&matBrand=${query.value}`
    );
    if (response.data.Data && response.data.Data.length > 0) {
      tableData.value = response.data.Data;
      total.value = response.data.TotalCount;
    } else {
      tableData.value = [];
      total.value = 0;
    }
  } catch (error) {
    console.error("Error fetching data:", error);
  }
};

const fetchDropdownData = async () => {
  try {
    const [unitsRes, materialTypesRes, materialPropertiesRes] =
      await Promise.all([
        axios.get("Materials/GetMatUnitInfoShow"),
        axios.get("Materials/GetMatTypeinfoShow"),
        axios.get("Materials/GetMatattrShow"),
      ]);
    units.value = unitsRes.data;
    materialTypes.value = materialTypesRes.data;
    materialProperties.value = materialPropertiesRes.data;
  } catch (error) {
    console.error("Error fetching dropdown data:", error);
  }
};

const handleSizeChange = (val) => {
  pageSize.value = val;
  fetchData();
};

const handleCurrentChange = (val) => {
  currentPage.value = val;
  fetchData();
};

const handleQuery = () => {
  fetchData();
};

function handleAdd() {
  // 点击添加按钮跳转到 MaterialView 页面
  // 使用 Vue Router
  router.push("/UserList/matel");
}

onMounted(() => {
  fetchData();
  fetchDropdownData();
});
</script>

<style>
#app {
  max-width: 100%;
  margin: 0 auto;
  padding: 0rem;
  font-weight: normal;
  width: 1800px;
}
.toolbar {
  margin-bottom: 20px;
}

.search {
  text-align: right;
}
</style>
